<template>
  <div class="category">
    <Nav></Nav>
    <Content class="artlist">
      <Row class="mar">
        <Col>
          <p>话题分类</p>
          <Button @click="categoryView = true">创建新分类</Button>
          <Modal
            v-model="categoryView"
            title="创建新话题分类"
            @on-ok="createCategory"
            @on-cancel="categoryView = false"
          >
            <Form :model="categoryInfo" label-position="top">
              <FormItem label="分类名">
                <Input
                  placeholder="请输入分类名"
                  v-model="categoryInfo.title"
                ></Input>
              </FormItem>
              <FormItem label="分类概要">
                <Input
                  placeholder="请输入概要"
                  v-model="categoryInfo.body"
                ></Input>
              </FormItem>
              <SendImg></SendImg>
            </Form>
          </Modal>
        </Col>
      </Row>
      <Row :gutter="12">
        <Col
          :xs="24"
          :md="12"
          :lg="6"
          class="cardwrap"
          v-for="item in newArtArr"
          :key="item.cid"
        >
          <Card class="card">
            <img :src="item.imgUrl" alt="" />
            <div slot="extra">{{ item.createTime }}</div>
            <p class="outline">{{ item.body }}</p>
            <!-- <Row>
                    <Col :sm="8">ssss </Col>
                    <Col :sm="8" offset="8">
                      {{item.title}}
                    </Col>
                  </Row> -->
            <Row class="data-wrap" justify="space-between">
              <Col>
                <Button
                  type="primary"
                  :to="{ name: 'Detail', params: { aid: item.aid } }"
                  >查看详情</Button
                >
              </Col>
              <Col class="data-details">
                {{ item.title }}
                <!-- <Icon type="ios-eye"></Icon>
                      
                      <Icon class="heart" type="ios-heart" ></Icon>
                      {{ item.praise }} -->
              </Col>
            </Row>
            
          </Card>
          
        </Col>
           
      </Row>
       <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[4, 8, 12]"
      :page-size="4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="artArr.length">
    </el-pagination>
  </div>
    </Content>
  </div>
</template>

<script>
import SendImg from "../components/SendImg.vue";
export default {
  name: "Category",
  components: {
    SendImg,
  },
  data() {
    return {
       currentPage: 1,
         pageSize:"4",
      pageNowNum:"1",
      categoryView: false,
      artArr: [],
      categoryInfo: {
        title: "",
        body: "",
        imgUrl: "",
      },
    };
  },
computed:{
  newArtArr(){
     let arr
          arr =this.artArr
          arr = arr.reverse() 
    return arr.slice(this.pageSize*(this.pageNowNum -1),this.pageSize*this.pageNowNum)
  }
},
  methods: {
     handleSizeChange(val) {
        this.pageSize =val
        this.artArr.reverse()

        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.artArr.reverse()

        this.pageNowNum =val
        // console.log(`当前页: ${val}`);
      },
    createCategory() {
      this.categoryInfo.imgUrl = this.$store.state.user.imgUrl;
      this.$artcle
        .createCategory({
          data: this.categoryInfo,
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
  beforeCreate() {
    this.$artcle.getcList().then((res) => {
      if (res.ret === 200) {
        this.artArr = res.data;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.mar {
  margin: 50px 0;
  font-size: 24px;
}
.block{
  margin:auto;
}
.artlist {
  padding: 0px 10%;
  .card {
    color: rgb(15, 15, 15);
    margin-bottom: 20px;
    white-space: nowrap;
    img {
      width: 100%;
      height: 150px;
    }
    p {
      white-space: nowrap;
      text-indent: 1rem;
      overflow: hidden;
      width: 100%;
      text-overflow: ellipsis;
    }
    .outline {
      height: 40px;
      line-height: 40px;
      border-bottom: 2px solid #eee;
    }
    .data-wrap {
      text-align: left;
      padding-top: 10px;
      .data-details {
        text-align: right;
        line-height: 32px;
      }
    }
    .heart {
      color: rgb(189, 187, 185);
    }
  }
}
</style>